<script setup lang="ts">
import TodoItem from './TodoItem.vue'

defineProps<{
  todos: {
    id: number
    text: string
    completed: boolean
  }[]
}>()

const emit = defineEmits(['toggle', 'remove'])
</script>

<template>
  <ul class="todo-list">
    <TodoItem
      v-for="todo in todos"
      :key="todo.id"
      :todo="todo"
      @toggle="$emit('toggle', todo.id)"
      @remove="$emit('remove', todo.id)"
    />
  </ul>
</template>
